<template>
  <el-menu router class="el-menu-vertical-demo" background-color="#304156" text-color="#fff" active-text-color="#409eff">
    <!-- 自定义组件：遍历路由表，生成左侧菜单 -->
    <AsideSubMeunView :menus="menus" v-if="menus.length"></AsideSubMeunView>
  </el-menu>
</template>

<script lang="ts" setup>
import AsideSubMeunView from '@/views/index/AsideSubMeunView.vue';

import { computed, onMounted, ref, watch } from 'vue';
import type { Permission } from '@/types/interface/auth_interface';
import { useAuthStore } from '@/stores/auth';

const authStore = useAuthStore();
const menus = ref<Permission[]>([]);

onMounted(() => {
  menus.value = authStore.getMenus();
});
</script>

<style scoped>
.el-menu {
  height: 100%; /*将左侧菜单栏高度拉升到100%*/
}
</style>
